<template>
	<view class="home">
		<navbar :lable="lable" @input="changeInput" :isSeach="true" />
		<view class="home-list">
			<view v-if="is_history" class="label-box">
				<view class="label-header">
					<text class="label-title">搜索历史</text>
					<text @click="clearHistory" class="label-clear">清空</text>
				</view>
				<view v-if="historyList.length>0" class="label-conern">
					<view @click="openLable(item)" class="label-conern-item" v-for="item in historyList" :key="item">
						{{item}}
					</view>
				</view>
				<view v-else class="no-data">
					没有搜索历史
				</view>
			</view>
			<list-scroll v-else>
				<list-card v-if="articleList.length > 0" v-for="item in articleList" :mode="item.mode" :key="item.id" :data="item" />			
				<view class="load-more">
					<view v-if="isLength" class="no-data">当前搜索暂无数据</view>
					<uni-load-more v-if="!isLength && articleList.length == 0" status="loading"></uni-load-more>
					
				</view>
			</list-scroll>

		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				is_history: true,
				articleList: [],
				timer: null,
				lable:'',
				isLength: false,
				// historyList: [1,2,3,5,6,6,8]
			};
		},
		computed: {
			...mapState(['historyList', 'user_id'])
		},
		methods: {
			changeInput(val) {
				this.isLength = false
				this.is_history = false
				if(this.timer) 
				{clearTimeout(this.timer);}
				
				this.timer = setTimeout(()=>{
				this.get_article(val)
					this.timer = null;
				},500);
			},
			openLable(val){
				this.lable = val
				this.changeInput(val)
			},
			async get_article(value) {
				if (!value) {
					this.articleList = []
					this.is_history = true
					return false;
				}
				let articleList = await this.$api.get_search({
					value,
					user_id: this.user_id
				})
				if (!articleList) return false;
				this.$store.dispatch('set_history', value)
				if (articleList.length == 0)
				this.isLength = true
				this.articleList = articleList
				// console.log(articleList);
			},
			clearHistory() {
				this.$store.dispatch('clearHistory')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		display: flex;
		flex-direction: column;
		flex: 1;

		.home-list {
			height: 100%;

			.label-box {
				background-color: #fff;
				margin-bottom: 10px;

				.label-header {
					display: flex;
					justify-content: space-between;
					font-size: 14px;
					color: #666;
					padding: 10px 15px;
					border-bottom: 1px #f5f5f5 solid;

					.label-title {
						color: $uni-color-warning;
					}

					.label-clear {
						color: #ccc;
						// font-weight: bolder;
					}
				}

				.label-conern {
					display: flex;
					flex-wrap: wrap;
					padding: 15px;
					padding-top: 0px;

					.label-conern-item {
						padding: 3px 12px;
						margin-top: 12px;
						margin-right: 10px;
						border-radius: 15px;
						// border: 1px #666 solid;
						background-color: #eee;
						font-size: 14px;
						color: #333;
					}
				}
			}

			.no-data {
				height: 200px;
				line-height: 200px;
				width: 100%;
				text-align: center;
				font-size: 12px;
				color: #666;
			}
		}
	}
</style>
